import { Plus } from "lucide-react";
import { CreateOrganization } from "@clerk/nextjs";

import {
  Dialog,
  DialogContent,
  DialogTrigger,
  DialogTitle,
  DialogDescription,
} from "@/components/ui/dialog";
import { Hint } from "@/components/hint";

/**
 * @property  创建新组织组件
 */

const NewButton = () => {
  return (
    <Dialog>
      <DialogTrigger asChild>
        {/* aspect-square 设置元素的宽高比 */}
        <div className="aspect-square">
          <Hint label="创建组织" side="right" sideOffset={18} align="start">
            <button className="bg-white/25 h-full w-full rounded-md flex justify-center items-center transition opacity-60 hover:opacity-100">
              <Plus className="text-whtie" />
            </button>
          </Hint>
        </div>
      </DialogTrigger>
      <DialogTitle>
        <DialogDescription></DialogDescription>
      </DialogTitle>
      <DialogContent className="p-0 border-none bg-transparent max-w-[432px]">
        <CreateOrganization />
      </DialogContent>
    </Dialog>
  );
};

export default NewButton;
